<template>
  <div>
    <div class="info-bar">
      <van-nav-bar
        title="账户设置"
        :border="false"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="main" ref="wrapper">
      <div class="main_content">
        <div class="heard-info" @click="toUserInfo">
          <div class="heard-info_l">
            <div class="herad_user">
              <img :src="iconUrl + $store.state.emailLogin[0].userImg" alt="" />
              <div class="herad_userName">
                <p>{{ $store.state.emailLogin[0].Account }}</p>
                <p>用户名：{{ $store.state.emailLogin[0].Nickname }}</p>
              </div>
            </div>
          </div>
          <div class="heard-info_r">
            <van-icon name="arrow" />
          </div>
        </div>
        <router-link :to="{ name: 'AddressManagement' }">
          <van-cell class="Address_box" title="地址管理" is-link />
        </router-link>
      </div>
      <div class="main_Middle">
        <router-link :to="{ name: 'PaymentSafe' }">
          <van-cell title="账户与安全" is-link />
        </router-link>
        <van-cell title="我的档案" is-link />
        <router-link :to="{ name: 'PaymentSettings' }">
          <van-cell title="支付设置" is-link />
        </router-link>
        <van-cell title="我的发票" is-link />
        <van-cell title="消息通知" is-link />
      </div>
      <div class="main_Middle_2">
        <van-cell title="帮助与反馈" is-link />
        <van-cell title="隐私" is-link />
      </div>
      <div class="bottom_btn">
        <van-button color="#7232dd" @click="Exitlogin">退出登录</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toUserInfo() {
      this.$router.push("/BasicInfo");
      console.log("ss");
    },
    Exitlogin() {
      this.$dialog
        .confirm({
          message: "确认退出吗！",
        })
        .then(() => {
          this.$store.commit("deleteUser", null);
          // this.$store.state.emailLogin = [];
          window.localStorage.clear();
          this.$router.push("/Homepage");
          setTimeout(() => {
            window.location.reload();
          }, 1200);
          // window.localStorage.removeItem("TOKEN_EMAIL");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  background-color: #f2f2f2;
  width: 100%;
  //   height: 100%;
  position: absolute;
  bottom: 0;
  top: 35px;
  left: 0;

  .main_content {
    background-color: white;
    width: 100%;
    height: 16.4vh;

    .heard-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px 0;
      .heard-info_l {
        margin-top: 10px;
        margin-left: 10px;
        .herad_user {
          display: flex;
          align-items: center;
          margin-top: 6px;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
          .herad_userName {
            margin-left: 10px;
          }
          p {
            margin: 5px 0;
          }
        }
      }
      .heard-info_r {
        margin-right: 10px;
        margin-top: 10px;
        i {
          font-size: 20px;
        }
      }
    }
    .Address_box {
      top: 10px;
      border-top: 1px solid #e4e4e4;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  }
  .main_Middle {
    margin-top: 45px;
  }
  .main_Middle_2 {
    margin-top: 20px;
  }
  .bottom_btn {
    margin-top: 20px;
    button {
      width: 100%;
    }
  }
}
</style>